
<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    width="35%"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :model="formState"
      ref="formRef"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }"
    >
      <a-form-item
        label="菜单名称"
        name="name"
        :rules="[{ required: true, message: '请输入菜单名称' }]"
      >
        <a-input v-model:value="formState.name" placeholder="请输入菜单名称" />
      </a-form-item>
      <a-form-item
        label="菜单路径"
        name="path"
        :rules="[{ required: true, message: '请输入菜单路径' }]"
      >
        <a-input v-model:value="formState.path" placeholder="请输入菜单路径" />
      </a-form-item>
      <a-form-item
        label="上级菜单"
        name="parent_id"
        :rules="[{ required: true, message: '请选择上级菜单' }]"
      >
        <a-tree-select
          v-model:value="formState.parent_id"
          style="width: 100%"
          :tree-data="treeData"
          allow-clear
          show-search
          placeholder="请选择上级菜单"
          :field-names="{
            children: 'child',
            label: 'name',
            value: 'auth_id',
          }"
        />
      </a-form-item>
      <a-form-item
        label="类型"
        name="module"
        :rules="[{ required: true, message: '请选择类型' }]"
      >
        <a-radio-group v-model:value="formState.module">
          <a-radio :value="1">菜单</a-radio>
          <a-radio :value="2">操作</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="图标" name="action_mark">
        <a-input
          v-model:value="formState.action_mark"
          placeholder="请输入图标"
        />
      </a-form-item>
      <a-form-item label="排序" name="sort">
        <a-input-number
          placeholder="请输入序号"
          style="width: 200px"
          v-model:value="formState.sort"
          :min="0"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { getAll as getMenus, add, edit, info } from "@/api/admin/auth";

const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);

const treeData = ref([]);
const formRef = ref();
const formState = reactive({
  name: "",
  path: "",
  parent_id: 0,
  sort: 0,
  module: 1,
  action_mark: "",
});

const show = (model) => {
  visible.value = true;
  getAllMenus();
  modalTitle.value = model ? "编辑菜单" : "新增菜单";
  //获取详情
  if (model && model.auth_id) {
    getDetails(model.auth_id);
  } else {
    resetForm({
      auth_id: null,
      name: "",
      path: "",
      parent_id: 0,
      sort: 0,
      module: 1,
      action_mark: "",
    });
  }
};
const getAllMenus = () => {
  getMenus().then(function (res) {
    if (res.code == 0) {
      const data = res.data;
      treeData.value = data || [];
    }
  });
};
const getDetails = (id) => {
  info({
    id: id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
    }
  });
};

const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
const handleCancel = () => {
  formRef.value.resetFields();
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    let params = {
      ...formState,
    };
    if (formState.auth_id) {
      //编辑
      edit({
        id: formState.auth_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add(params).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
defineExpose({
  show,
});
</script>
<style scoped></style>
  